<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    <style>
      .box{width: 100px;margin: 10px;padding: 10px;background-color: red;text-align: center;}
    </style>
	</head>
	<body>
    <div id="app">
      <div class="box" @click="sum()">点击</div>
      <div>计算属性内的定义：{{sum}}-{{sum}}</div>
      <div>方法内的定义：{{sum2()}}-{{sum2()}}</div>
      <button type="button" @click="arr.push(5)">修改arr</button>
    </div>
	</body>
  <script src="../vue.js"></script>
  <script>
    new Vue({
      el:"#app",
      data:{
        title:"方法选项+计算属性选项",
        arr:[3,6,1,7,9,2],
        // sum:""
      },
      methods:{
        // 内部定义的就是函数,功能,执行即可
        fn(){
          console.log(1)
        },
        // 一种复杂的数据，需要经过计算
        sum2(){
          return this.arr.reduce((prev,now)=>{
            return prev + now
          },0)
        }
      },
      computed:{
        sum(){
          return this.arr.reduce((prev,now)=>{
            return prev + now
          },0)
        }
      }
    })
  </script>
</html>
